import { CommandDialog } from '@amcax/base';
import { i18n } from '@app-nextmesh/common/utils';
import { NMTopoBaseCommand } from '@app-nextmesh/types/command';
import { RJSFSchema } from '@rjsf/utils';
import { PickInputRJSFFormat } from '@app-cad/common/components/command-form/constants';
import { useState } from 'react';
import { Select } from 'antd';
import { CommandLabeledItemWrapper } from '@app-cad/common/components/command-form/item-wrapper';
import { MsComponent } from '@app-nextmesh/commands/topo/cmd-common/component';
import { getNormalOrId } from '@app-nextmesh/commands/topo/cmd-common/tools';
interface CommandProps {
  title: string;
  onClose: () => void;
}
const setSchema = (mode): RJSFSchema => {
  return {
    type: 'object',
    properties: {
      source: {
        type: 'string',
        format:
          mode === 'line'
            ? PickInputRJSFFormat.PickALL
            : PickInputRJSFFormat.PickModel,
      },
    },
  };
};
const extraUiSchema = (mode) => ({
  source: {
    'ui:placeholder': mode === 'line' ? '选择点/边/面' : '选择体',
    'ui:autofocus': true,
  },
});
function formatFn(params) {
  const id = getNormalOrId(params.source, 'id').id;
  return {
    source: id,
  };
}
const query = {
  id: 'ID',
  type: '类型',
  coord: '坐标',
  length: '长度',
  area: '面积',
  volume: '体积',
  boundingBox: '包围盒',
};
const coordinate = ['X', 'Y', 'Z'];
// source
function Command({ onClose, title }: CommandProps) {
  const [mode, setMode] = useState<'line' | 'model'>('line');
  const [queryInfo, setQueryInfo] = useState(null);
  return (
    <CommandDialog
      title={title}
      onClose={onClose}
      placement='topLeft'>
      <CommandLabeledItemWrapper
        textClassName='text-reset'
        className='mt-5 px-5'
        label='类型'>
        <Select
          options={[
            { value: 'line', label: '选择点/线/面' },
            { value: 'model', label: '选择体' },
          ]}
          value={mode}
          onChange={(val) => {
            if (val !== mode) {
              setMode(val);
            }
          }}
        />
      </CommandLabeledItemWrapper>
      {mode === 'line' && (
        <MsComponent
          onClose={onClose}
          formatParam={formatFn}
          formParams={{
            schemaParams: setSchema(mode),
            extraUiSchema: extraUiSchema(mode),
          }}
          wsApi={'query'}
          callback={(res) => {
            setQueryInfo(res);
          }}
        />
      )}
      {mode === 'model' && (
        <MsComponent
          onClose={onClose}
          formatParam={formatFn}
          formParams={{
            schemaParams: setSchema(mode),
            extraUiSchema: extraUiSchema(mode),
          }}
          wsApi={'query'}
          callback={(res) => {
            setQueryInfo(res);
          }}
        />
      )}
      {Object.keys(queryInfo || {}).map((key) => {
        return (
          <CommandLabeledItemWrapper
            textClassName='text-reset'
            className='mt-2 px-5 mb-2 items-start'
            label={query[key] + ' :'}>
            <div>
              {Array.isArray(queryInfo[key])
                ? queryInfo[key].map((item, index) => {
                    return (
                      <div>
                        {coordinate[index]}:{' '}
                        {Array.isArray(item) ? (
                          <>[{item.join(', ')}]</>
                        ) : (
                          <>{item}</>
                        )}
                      </div>
                    );
                  })
                : queryInfo[key]}
            </div>
          </CommandLabeledItemWrapper>
        );
      })}
    </CommandDialog>
  );
}
export const cmdQuery: NMTopoBaseCommand = {
  id: 'CmdFillHole',
  label: 'command.mesh.query',
  icon: 'commands/curved/query',
  create: function (label: string, onClose: () => void) {
    return (
      <Command
        title={i18n.t(label)}
        onClose={onClose}
      />
    );
  },
};
